<!-- 电子围栏与车辆绑定 -->
<!DOCTYPE>
<html>

<head>
    <%- include ../taglib/layout-map.ejs %>
    <link href="/css/plugins/dataTables/dataTables.checkboxes.css" rel="stylesheet">
    <script src="/js/plugins/dataTables/dataTables.checkboxes.js"></script>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row  animated fadeInDown">
        <div class="col-sm-12">
            <!-- collapsed-->
            <div class="ibox float-e-margins ">
                <div class="ibox-title">
                    <h5>地图预览</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content " style="height: 300px;">
                    <div class="row">
                        <div style="height: 100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
                            <div id="map" style="height: 100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
                            <div id="app-right-top">
                                <div id="user-center" class="ui3-user-center-wrap">
                                    <div class="avatar-abstract"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2 ">
            <div class="ibox float-e-margins"  style="overflow-x:auto;">
                <div class="ibox-title">
                    <h5>围栏数据</h5>

                </div>
                <!--<div class="ibox-content pre-scrollable">-->
                <div class="ibox-content   pre-scrollable">
                    <div id='external-events'>
                        <ul id="fenceTree" class="ztree">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins" style="overflow-x:auto;">
                <div class="ibox-title">
                    <h5>车辆数据</h5>

                </div>
                <div class="ibox-content  pre-scrollable">
                    <div id='external-events'>
                        <ul id="kindTree" class="ztree">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>绑定预览</h5>

                </div>
                <div class="ibox-content">
                    <div class="row" id="">
                        <div class="row">
                            <div>
                                <form role="form" class="form-inline " style="padding-left:20px">
                                    <div class="form-group  div-serch-input">
                                        <button class="btn btn-info " type="button"
                                                onclick="addRow()"><i class="fa fa-angle-double-right"></i> 添加
                                        </button>
                                    </div>
                                    <div class="form-group  div-serch-input">
                                        <button class="btn btn-danger " type="button"
                                                onclick="delRow()"><i class="fa fa-angle-double-left"></i> 删除
                                        </button>
                                    </div>
                                    <div class="form-group  div-serch-input">
                                        <button class="btn btn-primary" type="button"
                                                onclick="saveFence()"><i class="fa fa-check"></i> 保存
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div>
                            <table id="fenceTemTable"
                                   class="table table-striped table-bordered table-hover dataTables-example">
                                <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th width="100px">车牌号</th>
                                    <th width="100px">围栏名称</th>
                                    <th width="100px">报警类型</th>
                                    <th width="50px">偏离限值</th>
                                    <th width="50px">次数限值</th>

                                    <th width="200px">计划名称</th>
                                    <!--<th width="200px">开始时间</th>-->
                                    <!--<th width="200px">结束时间</th>-->
                                    <th >carId</th>
                                    <th >fenceId</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins collapsed">
                <div class="ibox-title">
                    <h5>绑定列表</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row" id="">
                        <div class="row">
                            <div>
                                <form role="form" class="form-inline " style="padding-left:20px">
                                    <div class="input-group div-serch-input">
                                        <input type="text" placeholder="请录入名称查询" class="input form-control" id="serchStr">
                                        <span class="input-group-btn">
                                        <button type="button" class="btn btn btn-primary" onclick="query()">
                                            <i class="fa fa-search"></i> 搜索</button>
                                    </span>
                                    </div>
                                    <div class="form-group  div-serch-input">
                                        <button class="btn btn-danger " type="button" onclick="dels()"><i class="fa fa-close"></i> 批量删除
                                        </button>
                                    </div>
                                    <div class="form-group  div-serch-input">
                                        <button type="button" class="btn btn btn-primary" onclick="outexcel()"><i
                                                    class="fa  fa-file-excel-o"></i> 导出
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div>
                            <table id="fenceTable"
                                   class="table table-striped table-bordered table-hover dataTables-example">
                                <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th width="200px">id</th>
                                    <th width="200px">车牌号</th>
                                    <th width="200px">围栏名称</th>
                                    <th width="200px">报警类型</th>
                                    <th width="200px">偏离限值</th>
                                    <th width="200px">次数限值</th>
                                    <th width="200px">计划名称</th>
                                    <th width="200px">开始时间</th>
                                    <th width="200px">结束时间</th>
                                    <th width="200px">carId</th>
                                    <th width="200px">fenceId</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="h_car_id">
<input type="hidden" id="h_car_no">
<input type="hidden" id="h_fence_id">
<input type="hidden" id="h_fence_name">
<%- include ../taglib/layout-content.ejs %>
<script src="js/combox/comb-work-data.js"></script>

<script type="text/javascript">
    var tableFenceTem;
    var tableFence;
    var validator;
    $(document).ready(function () {
        tableFenceTem = $('#fenceTemTable').dataTable({
            "lengthChange": false,//是否允许用户自定义显示数量
            "searching": false,//本地搜索
//            "scrollY": true,//dt高度
            "scrollX": true,
            "autoWidth": true,//自动宽度
            "bSort": false,
            columns: [
                {
                    "sClass": "text-center",
                    "data": "id",
                    'checkboxes': {
                        'selectRow': true,
                    }
                },
                {"sClass": "text-center", data: 'carNo'},
                {"sClass": "text-center", data: 'fenceName'},
//                0-驶入报警 1-驶出报警 2-驶入驶出报警 3-偏离报警
                {"sClass": "text-center", data: 'isDriverType'},
                {"sClass": "text-center", data: 'plDis'},
                {"sClass": "text-center", data: 'settingcount'},
                {"sClass": "text-center", data: 'workName'},
//                {"sClass": "text-center", data: 'limitedBegintime'},
//                {"sClass": "text-center", data: 'limitedEndtime'},
                {"sClass": "text-center", data: 'carid'},
                {"sClass": "text-center", data: 'fenceid'}

            ],
            initComplete: function (setting, json) {
                //隐藏列
                visiblecolumn(this,7, false);
                visiblecolumn(this,8, false);
            },
        });
        tableFence = $('#fenceTable').dataTable({
            "lengthChange": false,//是否允许用户自定义显示数量
//            "searching": false,//本地搜索
//            "scrollY": "220px",//dt高度
//            "autoWidth": true,//自动宽度
            "dom": '<"top"<"clear">>rt<"bottom"ilp<"clear">>',
//            "lengthChange": false,//是否允许用户自定义显示数量
            "ajax": {
                "url": "/baseFenceManager/list",
                "dataSrc": "rows"
            },
            serverSide: true,
            columns: [
                {
                    "sClass": "text-center",
                    "data": "id",
                    'checkboxes': {
                        'selectRow': true,
                    }
                },
                {"sClass": "text-center", data: 'id'},
                {"sClass": "text-center", data: 'baseCarNo'},
                {"sClass": "text-center", data: 'settingname'},
//                0-驶入报警 1-驶出报警 2-驶入驶出报警 3-偏离报警
//                {"sClass": "text-center", data: 'isDriverType'},
                {
                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                    debugger;
//                    accFlag
                    var d = e.isDriverType;

                    if (d == 0) {
                        result = "驶入报警";
                    } else if (d == 1) {
                        result = "驶出报警";
                    }else if (d == 2) {
                        result = "驶入驶出报警";
                    }else if (d == 3) {
                        result = "偏离报警";
                    }
                    return result
                }, "bSortable": false, "orderable": false
                },
                {"sClass": "text-center", data: 'plDis'},
                {"sClass": "text-center", data: 'settingcount'},
                {"sClass": "text-center", data: 'workName'},
                {"sClass": "text-center", data: function (d, e, f, g) {//这里给最后一列返回一个操作列表
                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                    debugger;
                    var xq = $.formatDate("HH:mm", d.limitedBegintime);
                    return xq
                }, "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: function (d, e, f, g) {//这里给最后一列返回一个操作列表
                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                    debugger;
                    var xq = $.formatDate("HH:mm", d.limitedEndtime);
                    return xq
                }, "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'carid'},
                {"sClass": "text-center", data: 'fenceid'}

            ],
            //排序
            'order': [[1, 'desc']],
            initComplete: function (setting, json) {
                //隐藏列
                visiblecolumn(this,1, false);
                visiblecolumn(this,10, false);
                visiblecolumn(this,11, false);
            },
        });

    });

    function addRow() {
//        获取隐藏域数据
            var carId=$("#h_car_id").val();
            var fenceId=$("#h_fence_id").val();
            var fenceName=$("#h_fence_name").val();
            var carNo=$("#h_car_no").val();
            if(fenceId&&carId){
                tableFenceTem.api().rows.add(
                    [{
                        "id":carId+fenceId,
                        "carNo":       carNo,
                        "fenceName":   fenceName,
                        "isDriverType":    " <select class='form-control isDriverTypeClass'  name='baseCarRlType' type='text'>"+
                        "<option value='3'>偏离报警</option>"+
                        "<option value='0'>驶入报警</option>"+
                        "<option value='1'>驶出报警</option>"+
                        "<option value='2'>驶入驶出报警</option>"+
                        "</select>",
                        "plDis": "<input type='number' placeholder='偏离限值' name='plDis' class='input form-control plDisClass' value='200' number='true'>",

                        "settingcount": "<input type='number' placeholder='次数限值' name='settingcount' class='input form-control settingcountClass' value='5' number='true'>",

                        "workName":    " <select class='form-control workNameClass'  name='workName' type='text'>"+
                        combWorkOptio+
                        "</select>",
//            "limitedBegintime":     "<input placeholder='开始时间' class='laydate-icon form-control layer-date startTimeClass'  onclick=\"laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})\">",
//            "limitedEndtime":       "<input placeholder='结束时间' class='laydate-icon form-control layer-date endTimeClass'onclick=\"laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})\">",
                        "carid":       carId,
                        "fenceid":       fenceId,
                    }]
                ).draw();
            }else{
                swal({
                    title: "系统提示",
                    text: "请选择车辆和围栏！",
                    type: "error"
                });
            }
//        0-驶入报警 1-驶出报警 2-驶入驶出报警 3-偏离报警

    }
    function saveFence() {
        debugger;
        var jsonstr = [];
//        JSON.stringify(jsonstr)
        var isDriverType=[];
        var isDriverTypeTemp = tableFenceTem.$('.isDriverTypeClass').serialize();
        var workNameTemp = tableFenceTem.$('.workNameClass').serialize();
        var plDisClassTemp = tableFenceTem.$('.plDisClass').serialize();
        var settingcountTemp = tableFenceTem.$('.settingcountClass').serialize();
        var startTimeTemp = tableFenceTem.$('.startTimeClass');
        var endTimeTemp = tableFenceTem.$('.endTimeClass');
        var arrayIsDriverType=[];
        var arrayworkName=[];
        var arrayplDis=[];
        var arraySettingcount=[];
        if(isDriverTypeTemp){
            arrayIsDriverType=isDriverTypeTemp.split('&');
        }
        if(workNameTemp){
            arrayworkName=workNameTemp.split('&');
        }
        if(plDisClassTemp){
            arrayplDis=plDisClassTemp.split('&');

        }
        if(settingcountTemp){
            arraySettingcount=settingcountTemp.split('&');
        }

        var data = tableFenceTem.DataTable().rows().data();
        $.each(data,function(key,value){
            var isDriverType=eval(arrayIsDriverType[key]);
            var workName=eval(arrayworkName[key]);
            var plDis=eval(arrayplDis[key]);
            var settingcount=eval(arraySettingcount[key]);
            var startTime=startTimeTemp[key];
            var endTime=endTimeTemp[key];
            var row={
                    "carid":value.carid,"fenceid":value.fenceid,
                    "isDriverType":isDriverType,
                    "workId":workName,
                    "plDis":plDis,
                    "settingcount":settingcount

                };
            jsonstr.push(row);
        });

        debugger;

        //提交到后台
        //删除所有数据
//        tableFenceTem.DataTable().rows().remove().draw( false );

        $.ajax({
            type: "post",
            url: "/baseFenceManager/save",
            cache: false,
            async: false,
            data: {
                jsonstr: JSON.stringify(jsonstr)
            },
            dataType: "json",
            success: function (data) {
                if (data.success) {
                    swal({
                        title: "系统提示",
                        text: data.msg,
                        type: "success"
                    });
                    //刷新下方列表数据，清空绑定列表数据
                    tableFenceTem.DataTable().rows().remove().draw( false );
                    query();
                } else {
                    swal({
                        title: "系统提示",
                        text: data.msg,
                        type: "error"
                    });
                }
            }
        });
//        eval(isDriverTypeTemp.split('&')[1])
    }

    function del(id) {
        swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的，我要删除！",
                cancelButtonText: "让我再考虑一下…",
                closeOnConfirm: false,
                closeOnCancel: false
            },
            function (isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        type: "GET",
                        url: "/baseFenceManager/del",
                        cache: false,
                        async: false,
                        data: {
                            ids: id
                        },
                        dataType: "json",
                        success: function (data) {
//                            swal("删除成功！", "您已经永久删除了这条信息。", "success");
                            swal("删除成功！", data, "success");
                            query();
                        }
                    });

                } else {
                    swal("已取消", "您取消了删除操作！", "error");
                }
            });
    }
    //删除行
    function delRow() {
        tableFenceTem.DataTable().rows('.selected').remove().draw( false );
    }
    function dels() {
        var rows = tableFence.DataTable().rows('.selected').data();
        if (rows && rows.length >= 1) {

            var ids = "";
            rows.each(function (value) {
                ids += value.id + ",";
            })
            debugger;
            del(ids);
        } else {
            swal("系统提示", "请选择需要删除的数据！", "warning");
        }

    }
    function query() {
        var code = $("#serchStr").val();
        var jsonstr = [{"code": code}];
        tableFence.DataTable().search(JSON.stringify(jsonstr), false, false).draw();
    }
    //隐藏和显示列 c:列0开始，visible=false隐藏
    function visiblecolumn(table,c, visible) {
        table.DataTable().column(c).visible(visible)
    }
    function loadComb(id, data) {
        $("#" + id).select2({
            data: data,
            theme: "bootstrap",
            placeholder: '请选择',
            allowClear: true
        });
    }
</script>

<script>
    //    部门车辆树
    $(function () {
        var url='/tree/deptCar';
        var fenceUrl='/tree/fences';
        init_tree('id','parentId','name',fnClickCar);
        loadMyTree(url,"kindTree");
        init_tree('id','parentId','name',fnClickFence);
        loadMyTree(fenceUrl,"fenceTree");
//        $('body').everyTime('2das','refData',refData,0,true);
//        querycartitle();
    });
    //    树节点选中
    var fnClickCar=function (event, treeId, treeNode) {
        debugger;
        if(treeNode.isCar){
            $("#h_car_id").val(treeNode.id);
            $("#h_car_no").val(treeNode.name);
            var fenceType=treeNode.type;
            var contentinfo=treeNode.jw;
            var memo=treeNode.memo;
            drawingFence(fenceType,contentinfo);
        }else{
            $("#h_car_id").val("");
            $("#h_car_no").val("");
        }


    }
    var fnClickFence=function (event, treeId, treeNode) {
        if(treeNode.isLeaf){
            $("#h_fence_id").val(treeNode.id);
            $("#h_fence_name").val(treeNode.name);
            debugger;
            showFence(treeNode.type,treeNode.jw,treeNode.memo);
        }


    }
    function showFence(fenceType,contentinfo,memo) {
        clearAlldrawingModes();

            if(fenceType && fenceType==1 && contentinfo){
                var array=contentinfo.split(",")
                addDrawingMark(array[0], array[1]);
            }else if(fenceType && fenceType==2 && contentinfo){
                var radius=contentinfo.split(";")[1];
                var array=contentinfo.split(";")[0].split(",")
                addDrawingCircle(array[0], array[1],radius);
            }else if(fenceType && fenceType==3 && contentinfo){
                var points=contentinfo.split(";");
                var array=memo.split(",")
                addDrawingPolygon(points,array[0],array[1]);
            }else if(fenceType && fenceType==4 && contentinfo){
                var points=contentinfo.split(";");
                var array=memo.split(",")
                addDrawingPolyline(points,array[0],array[1]);
            }
    }
    function drawingFence(fenceType,contentinfo,memo) {
        if(fenceType && fenceType==1 && contentinfo){
            var array=contentinfo.split(",")
            addDrawingMark(array[0], array[1]);
        }else if(fenceType && fenceType==2 && contentinfo){
            var radius=contentinfo.split(";")[1];
            var array=contentinfo.split(";").split(",")
            addDrawingCircle(array[0], array[1],radius);
        }else if(fenceType && fenceType==3 && contentinfo){
            var points=contentinfo.split(";");
            var array=memo.split(",")
            addDrawingPolygon(points,array[0],array[1]);
        }else if(fenceType && fenceType==4 && contentinfo){
            var points=contentinfo.split(";");
            var array=memo.split(",")
            addDrawingPolyline(points,array[0],array[1]);
        }
    }
    function outexcel() {
        window.open("<%= serverurl%>/baseFenceManager/exportFenceExcel")
    }
</script>

<!--map-->
<script type="text/javascript">
    // 百度地图API功能
    var map;
    var carIocnPath="/js/mapPlugins/img/";
    var lastMark=[];
    var lastCarMark={};//终端数组
    var drawingManager;
    var opts = {
        width : 200,     // 信息窗口宽度
        height: 330,     // 信息窗口高度
//        title : "实时信息" , // 信息窗口标题
        panel  : "panel",
        enableMessage:true,//设置允许信息窗发送短息
        searchTypes   :[
            BMAPLIB_TAB_SEARCH,   //周边检索
            BMAPLIB_TAB_TO_HERE,  //到这里去
            BMAPLIB_TAB_FROM_HERE //从这里出发
        ]
    };
    //    var carIcon="car_online0.fw";
    $(function () {
        map = new BMap.Map('map');
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.enableScrollWheelZoom();
//        map.addControl(new BMap.MapTypeControl());
        var contextMenu =settxtMenuItem(new BMap.ContextMenu());
        map.addContextMenu(contextMenu);
        var jw="<%=jw%>";
        initPoint(jw);
    });
</script>
<script>
    $(function () {
        parent.menuclick();
    });
</script>
</body>

</html>
